<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #cantion{
            width: 100%;
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #xianshi{
            display: flex;
            align-items: center;
            width: 600px;
            height: 100px;
            overflow: hidden;  
            border: 5px red solid; 
        }
        #aimg{
            display: flex;
            height: 100px;
            width: 1600px;
        }
        #cantion img{
            width: 100px;
            height: 100px;
            
        }
        
    </style>
</head>
<body>
    <div id="cantion">
        <div id="xianshi">
            <div id="aimg" onmousemove="jinru()" onmouseout="chuqu()">
                <img src="./img/lunbo/1.jpeg">
                <img src="./img/lunbo/2.jpeg">
                <img src="./img/lunbo/3.jpeg">
                <img src="./img/lunbo/4.jpeg">
                <img src="./img/lunbo/5.jpeg">
                <img src="./img/lunbo/6.jpeg">
                <img src="./img/lunbo/7.jpeg">
                <img src="./img/lunbo/8.jpeg">
                <img src="./img/lunbo/9.jpeg">
                <img src="./img/lunbo/10.jpeg">
                <img src="./img/lunbo/1.jpeg">
                <img src="./img/lunbo/2.jpeg">
                <img src="./img/lunbo/3.jpeg">
                <img src="./img/lunbo/4.jpeg">
                <img src="./img/lunbo/5.jpeg">
                <img src="./img/lunbo/6.jpeg">
            </div>
        </div>
    </div>
</body>
<script>
    
		var imgListIdObj = document.getElementById('aimg');
		var marginLeft = 0;
        var gun=null		
		onload = function(){
            gun=setInterval(gundong,10);
        };  
        function gundong(){
                marginLeft--;
				imgListIdObj.style.marginLeft =marginLeft+'px';
				if(marginLeft==-1000){
					marginLeft=0;
				}
                if (marginLeft%100==0) {
                clearInterval(gun);
                setTimeout(function(){
                gun=setInterval(gundong,10);
                },1000);
            }
        }
        function jinru(){
            clearInterval(gun);
            console.log(1);
        }
        function chuqu(){
            gun=setInterval(gundong,10);
        }
</script>
</html>